<template>
    <div class="cmdcfg">
        <el-row>
            <div>
                <exSelect v-model="oper" label="操作类型" :dictList="typeList" size="mini" elstyle="width:100px;min-width:100px"></exSelect>
                <span v-if="isMatch">{{isMatch==1?"符合":"不符合"}}</span>
            </div>
            <div class="ml20">
                <exInput v-model="remark" label="备注" width="430" size="mini"></exInput>
            </div>
            <div class="ml20">
                <span  @click="showPoint({x:movex,y:movey})">移动位置:</span>
                <i class="el-icon-d-arrow-right" title="取移动位置" @click="setMovePos"></i>
                <exInput v-model.number="movex" label="x" width="75" size="mini"></exInput>
                <exInput v-model.number="movey" label="y" width="75" size="mini"></exInput>
            </div>
            <div class="ml20">
                <span @click="preView">查找范围:</span>
                <i class="el-icon-d-arrow-right" title="取查找范围" @click="setByDevInfo"></i>
                <exInput v-model.number="x1" label="x1" width="75" size="mini"></exInput>
                <exInput v-model.number="y1" label="y1" width="75" size="mini"></exInput>
                <exInput v-model.number="x2" label="x2" width="75" size="mini"></exInput>
                <exInput v-model.number="y2" label="y2" width="75" size="mini"></exInput>
            </div>
            <div class="ml20">
                <exInput v-model.number="iffix" label="兼容值" width="60" size="mini"></exInput>
                <i class="el-icon-d-arrow-right" title="取图片数据" @click="getImgInfo"></i>
                <exInput v-model.number="rectWidth" label="宽度" width="75" size="mini"></exInput>
                <exInput v-model.number="rectHeight" label="高度" width="75" size="mini"></exInput>
                <el-tooltip class="item" effect="light" placement="bottom" >
                    <div slot="content"> 
                        <!-- <el-row style="word-break: break-all;display:inline-block;max-width:500px;">
                            {{colors}}
                        </el-row> -->
                        <el-row>原图</el-row>
                        <el-row>
                            <!-- <canvasCmp :colors="colors" type="rect" :rectWidth="rectWidth" :rectHeight="rectHeight"></canvasCmp> -->
                        </el-row>
                        <el-row>获取到的数据:</el-row>
                        <el-row>
                            <!-- <canvasCmp :colors="getColor" type="rect" :rectWidth="rectWidth" :rectHeight="rectHeight"></canvasCmp> -->
                        </el-row>
                        <!-- <el-row style="word-break: break-all;display:inline-block;max-width:500px;">
                            {{getColor}}
                        </el-row> -->
                    </div>
                    <el-link type="primary">颜色数据({{colors.length}})
                        <canvasCmp :colors="colors" type="rect" :rectWidth="rectWidth" :rectHeight="rectHeight"></canvasCmp>
                    </el-link>
                </el-tooltip>
                <!-- <exInput v-model="colors" label="颜色数组" width="220" size="mini" v-if="selType.colors"></exInput> -->
            </div>
            <div v-if="matchList.length>0" style="word-break: break-all;display:inline-block;max-width:400px;">
                <template v-for="(item,idx) in matchList">
                    <el-link type="primary" :key="idx" style="display:inline-block;margin-left:10px;"  @click="showPoint(item)">
                        x: {{item.x}} y: {{item.y}}
                    </el-link>
                </template>
            </div>

        </el-row>
    </div>
</template>


<script>
import canvasCmp from "./util/canvasCmp.vue"
export default {
    components:{
        canvasCmp
    },
    props: {
        cmdInfo: { type: Object, default: {} },
        devInfo:{ type: Object, default: {} },
        cmdIdx : {},
    },
    data() {
        return {
            x1 : this.cmdInfo.x1 || "",
            y1 : this.cmdInfo.y1 || "",
            x2 : this.cmdInfo.x2 || "",
            y2 : this.cmdInfo.y2 || "",
            movex : this.cmdInfo.movex || "",
            movey : this.cmdInfo.movey || "",
            rectWidth : this.cmdInfo.rectWidth || "",
            rectHeight : this.cmdInfo.rectHeight || "",
            oper : this.cmdInfo.oper || "MovePos",
            remark : this.cmdInfo.remark || "",
            iffix : this.cmdInfo.iffix || 10,
            colors : this.cmdInfo.colors || [],
            level : this.cmdInfo.level || 0,
            timer : null,
            typeList:[
                {name:"定点移动",value:"MovePos"},
                {name:"点击",value:"Click"}
            ],
            isMatch: 0,
            desc: "",
            matchList: []
        };
    },
    inject: ['doDevCmd','doNextCmd','addCmd',"getImgData","getDevPic","getCurApp"],
    computed:{
        selType(){
            var type = {};
            type = this.typeList.find((item)=>{
                return item.value==this.oper
            })
            type = type || {};
            return type;
        }
    },

    mounted() {
    },

    methods: {
        getImgInfo(){
            
            var rectData = this.getImgData(this.devInfo.clickX,this.devInfo.clickY,
                this.devInfo.clickRX-this.devInfo.clickX,this.devInfo.clickRY-this.devInfo.clickY,true);
            this.rectWidth = rectData.rectWidth 
            this.rectHeight = rectData.rectHeight;
            this.colors = JSON.parse(JSON.stringify(rectData.rectcolors));
        },
        addSubCmd(){
            this.addCmd({type:"",level:this.level+1},this.cmdIdx+1);
        },
        setByDevInfo(){
            this.x1 = this.devInfo.clickX || "";
            this.y1 = this.devInfo.clickY || "";
            this.x2 = this.devInfo.clickRX || "";
            this.y2 = this.devInfo.clickRY || "";
        },
        setMovePos(){
            this.movex = this.devInfo.clickX;
            this.movey = this.devInfo.clickY
        },
        preView(){
            this.devInfo.clickX = this.x1;
            this.devInfo.clickY = this.y1;
            this.devInfo.clickRX = this.x2
            this.devInfo.clickRY = this.y2
        },
        showPoint(item){
            this.devInfo.clickX = item.x;
            this.devInfo.clickY = item.y;
        },
        saveCmd(){
            this.cmdInfo.oper = this.oper;
            this.cmdInfo.x1 = this.x1;
            this.cmdInfo.y1 = this.y1;
            this.cmdInfo.x2 = this.x2;
            this.cmdInfo.y2 = this.y2;
            this.cmdInfo.movex = this.movex;
            this.cmdInfo.movey = this.movey;
            this.cmdInfo.rectWidth = this.rectWidth;
            this.cmdInfo.rectHeight = this.rectHeight;
            this.cmdInfo.iffix = this.iffix;
            this.cmdInfo.remark = this.remark;
            this.cmdInfo.colors = this.colors;
        },
        initCmd(){
            this.moveCnt =0;
            this.isMatch = 0;
            this.desc = "";
            this.matchList = []
        },
        preCheck(){
            if(this.selType.x1 && !this.x1){
                this.$message.error("请输入X坐标")
                return false;
            }
            if(this.selType.y1 && !this.y1){
                this.$message.error("请输入Y坐标")
                return false;
            }
            if(this.oper===""){
                this.$message.error("请选择判断类型")
                return false;
            }
            return true;
        },
        runCmd(isOnce){
            if(!this.preCheck()){
                this.$emit("stopRun")
                return;
            }
            this.moveCnt =0;
            this.isMatch = 0;
            this.desc = "";
            this.matchList = []
            this.$nextTick(()=>{
                this.doCheck(isOnce)
            })
        },
        doSucc(isOnce){
            this.$emit("stopRun")
            this.isMatch = 1;
            if(!isOnce) this.doNextCmd();
        },
        doFail(isOnce){
            this.$emit("stopRun")
            this.isMatch = 2;
            if(!isOnce) this.doNextCmd();
        },
        stopCmd(){
            clearTimeout(this.sTimer);
            this.$emit("stopRun")
        },
        doCheck(isOnce){
            this.isMatch = 0;
            this.desc = "";
            this.doCheckRect(isOnce);
        },
        doCheckRect(isOnce){
            var that = this;
            var checkwidth = this.x2-this.rectWidth;
            var checkheight = this.y2-this.rectHeight;
            // debugger;
            this.matchList = [];
            for(var j=this.y1;j<checkheight;j++){
                for(var i=this.x1;i<checkwidth;i++){
                    var data = that.getImgData(i,j,this.rectWidth,this.rectHeight,true);
                    var arr = data.rectcolors;
                    // console.log(`x:${i} y:${j}`)
                    // if(i==126 && j==454) debugger;
                    if(arr.length>0){
                        var isBreak = false;
                        var diffcnt = 0;
                        for(var k=0;k<that.colors.length;k++){
                            var coloritem = that.colors[k];
                            for(var l=0;l<coloritem.length;l++){
                                var curPix = arr[k][l];
                                var prePix = coloritem[l];
                                var itemdiff = Math.abs(prePix - curPix);
                                if(itemdiff>that.iffix){
                                    diffcnt++;
                                    if(diffcnt>3){
                                        isBreak = true;
                                        that.desc = `x:${i} y:${j} 误差:${itemdiff}`
                                        break;
                                    }
                                    
                                }
                            }
                            if(isBreak) break;
                            if(k>20) break;
                        }
                        if(!isBreak){
                            var isadd = true;
                            for(var a=0;a<this.matchList.length;a++){
                                var aa = this.matchList[a];
                                if(Math.abs(aa.x-i)<30 && Math.abs(aa.y-j)<30){
                                    isadd = false;
                                    break;
                                }
                            }
                            if(isadd){
                                this.matchList.push({x:i,y:j})
                            }
                        }
                    }else{
                        that.$message.error("获取画布失败")
                        break;
                    }
                }
            }
            if(this.matchList.length>0){
                // that.desc = "查找成功:"+JSON.stringify(matchList)
                that.doAction(isOnce)
                return;;
            }

            that.doFail(isOnce)
            
        },
        doAction(isOnce){
            if(this["doAction"+this.selType.value]){
                this["doAction"+this.selType.value].call(this,isOnce);
            }else{
                this.doFail(isOnce);
            }
        },
        doActionClick(isOnce){
            this.doSucc(isOnce)
        },
        doActionMovePos(isOnce){
            this.moveCnt = this.moveCnt || 0;
            if(this.matchList.length>0){
                var item = this.matchList.splice(0,1)[0]
                //+(this.rectWidth/2)
                var sx = parseInt((item.x+(this.rectWidth/2))*this.devInfo.devBet);
                var sy = parseInt((item.y)*this.devInfo.devBet);
                var ex = parseInt((this.movex)*this.devInfo.devBet);
                var ey = parseInt((this.movey)*this.devInfo.devBet);
                this.doDevCmd(`adb shell input swipe ${sx} ${sy} ${ex} ${ey} 500`);
                
                this.moveCnt++;
                if(this.moveCnt>=2){
                    this.doSucc(isOnce)
                    return;
                }
                setTimeout(()=>{
                    this.doActionMovePos(isOnce)
                },600)
            }else{
                this.doSucc(isOnce)
            }
            
        }
        
    }
}
</script>

<style lang="less" scoped>
    .cmdcfg{
        display: inline-block;
    }
</style>
